<template>
    <view class="pro-body">
		
		<view class="fixed-header">
		
        <view class="promenu-list">
            <view class="promenu-item">
                <i style="background: #FF4E74;" />未完成
            </view>
            <view class="promenu-item">
                <i style="background: #faf9de;" />执行中
            </view>
            <view class="promenu-item">
                <i style="background: #cce8cf;" />当日完成
            </view>
            <view class="promenu-item">
                <i style="background: #faf9de;" />{{incompleteCount}}
            </view>
            <view class="promenu-item">
                <i style="background: #faf9de;" />{{excuteCount}}
            </view>
            <view class="promenu-item">
                <i style="background: #cce8cf;" />{{completeCount}}
            </view>
        </view>
	    <view>
	       <view>
			   <uni-data-select
				 v-model="value"
				 :localdata="selectRange"
				 @change="change"
			   ></uni-data-select>
	        </view>
	   
	    </view>
	    <view class="uni-form-item uni-column">
	        <view class="search-box">
	            <input class="uni-input" confirm-type="search" placeholder="输入生产订单号/客户订单号" v-model="billNo"  @confirm="onSearch"/>
	            <view class="search-icon" @click="onSearch">
	              <image src="/static/img/search.png" class="search-icon-image"></image>
	            </view>
	        </view>
			<view class="scan-icon" @click="scanOrderDe()">
			  <image src="/static/img/scan.png" style="width: 70px; height: 70px; margin-left: 10px;"class="search-icon-image"></image>
			  
			</view>
	    </view>
		
</view>
		<!-- <task-first ref="taskFirstRef" @success="handleScanSuccess"></task-first> -->
		 <view class="uni-form-list">
		        <scroll-view scroll-y="true" class="scroll"
		        @scrolltolower="handleScrolltolower" refresher-enabled
		        @refresherrefresh="handleRefresherrefresh" :refresher-triggered="refresherTriggered">
		        	<template v-if="tabMap.taskList && tabMap.taskList.length > 0">
		        		<uni-swipe-action>
		        			<uni-swipe-action-item 
		        				v-for="item in tabMap.taskList">
		        				<view class="panel" @click="openDetail(item)" :style="{ backgroundColor: item.boxColor }">
		        					<view class="panel_title" :class="{error: item.error}">
		        						<view class="panel_title_left">{{ item.fbillno }}</view>
		        						<view class="panel_title_right">{{ item.fprdorgname }}</view>
		        					</view>
		        					<view class="panel_content">
		        						<view class="flex-list">
		        							<view class="flex-left">
		        								<view class="flex-title-row">
		        									<view class="flex-title">编码</view><span>：</span>
		        								</view>
		        								<view class="flex-title-row">
		        									<view class="flex-title">名称</view><span>：</span>
		        								</view>
		        								<view class="flex-title-row"  v-if="item.fspecification.trim()">
		        									<view class="flex-title">规格</view><span>：</span>
		        								</view>
		        							
												<view class="flex-title-row">
													<view class="flex-title">数量</view><span></span>
												</view>
												
												<view class="flex-title-row">
													<view class="flex-title">时间</view><span>：</span>
												</view>
												<view class="flex-title-row">
													<view class="flex-title">客户订单号</view><span>：</span>
												</view>
		        							</view>
		        							<view class="flex-right">
		        								<view class="flex-content">
		        									{{ item.fmaterialnumber }}
		        								</view>
		        								<view class="flex-content">
		        									{{ item.fmaterialname }}
		        								</view>
		        								<view class="flex-content"  v-if="item.fspecification.trim()">
		        									{{ item.fspecification }}
		        								</view>
												<view class="flex-content">
													{{ item.fqty }}
												</view>
												<view class="flex-content">
													<uni-dateformat :date="item.fcreatedate"
														format="yyyy年MM月dd日">
													</uni-dateformat>
												</view>
												<view class="flex-content">
													{{ item.fcubillno }}
												</view>
		        							</view>
		        						</view>
		        						
		        					</view>
		        				</view>
		        			</uni-swipe-action-item>
		        			<!-- 加载 -->
		        			<uni-load-more
		        				:status="tabMap.pageConfig.bottomLoading ? 'loading' : tabMap.pageConfig.bottomEnd ? 'noMore' : 'more'">
		        			</uni-load-more>
		        		</uni-swipe-action>
		        	</template>
		        <uni-empty-info v-else label="暂无任务信息"></uni-empty-info>
		        </scroll-view>
		</view>
    </view>
</template>

<script>

import wechat from 'weixin-js-sdk'
import {getMoList,getOrgList,wxInit} from '@/utils/api.js';
import TaskFirst from '../../components/popup/task-first.vue'
import uniIcons from '../../uni_modules/uni-icons/components/uni-icons/icons.js';

export default {
	components: {
		TaskFirst,
		uniIcons
	  },
  data() {
return {
	tabMap: {
		taskList: [],
		pageConfig: {
			pageIndex: 0,
			pageSize: 20,
			bottomEnd: false,
			bottomLoading: true
		}
	 },
	wechat:{},
	refresherTriggered: false,
	_refresherTriggered: false,
	billNo:'',
	html5Qrcode: null,
	isScaning: false,
	incompleteCount : 0,//未完成数量
	excuteCount : 0,//执行中数量
	completeCount : 0,//已完成数量
	value: 100,//组织编码
	selectRange: []
	
	 };
  },
methods: {
	//获取微信配置信息
	getWxConfig(url){
		wxInit({'url' :url }).then(res =>{
			
			this.saveWxConfig(res.data.data)
		})
	},
	//配置微信config
	saveWxConfig(res){
		// 配置config信息
		wechat.config({
			debug: false,
			appId: res.appid, // 必填，公众号的唯一标识
			timestamp: res.timestamp, // 必填，生成签名的时间戳
			nonceStr: res.nonceStr, // 必填，生成签名的随机串
			signature: res.signature, // 必填，签名
			jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表
		});
	
		// 通过ready接口处理成功验证
		wechat.ready(function () {
			wechat.checkJsApi({
				jsApiList: ['scanQRCode'],
				success: function (res) {
					console.log('检验成功');
				}
			});
		});
		// 通过error接口处理失败验证
		wechat.error(function (res) {
			console.log('校验失败');
		});

	},
	scanOrderDe(){
		wechat.scanQRCode({
			needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果
			scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
			success: (res) => {
				//一维码扫出来的格式为code_128,res.resultStr
				if (res.resultStr.indexOf(",") != -1){//说明是一维码
					res.resultStr = res.resultStr.substring(res.resultStr.indexOf(",") + 1)
				}
			  // 当needResult 为 1 时，扫码返回的结果
			 this.billNo = res.resultStr 
			 //扫码成功后根据扫码结果重新查询
			 this.initData()
			 //this.taskScanningSucess();
			 
			}
		 });
	},
	handleScanSuccess(scanVal) {
		this.billNo = scanVal
		
		this.taskScanningSucess()
	},
	
	// 在合适的时机调用 filterOrdersByBillNo 方法，例如在扫描成功后
	taskScanningSucess(e) {
		let self = this;
		console.log('billNo:', self.billNo); //调试信息
		getMoList({
				billNo: self.billNo || ""
			}).then(res => {
				if (res.data.status == 200) {
					//this.$refs.taskFirstRef.close()
					uni.navigateTo({
						url:'/pages/produce/produceDetail?taskBillNo='  + self.billNo+'&FPRDORGID=' + self.fprdorgid,
					})
		
			}
			self.$emit('back', true)
		})
				},
	onSearch(){
		this.initData()
	},
	//修改组织后刷新页面
	change(e) {
	this.initData()
	},
  /**
   * 重置页数
   */
  reset() {
	this.tabMap.pageConfig.pageIndex = 0
	
  },
  /**
   * 跳转到生产订单详情
   */
  openDetail(e){
	  console.log(e)
  	uni.navigateTo({
  		url:'/pages/produce/produceDetail?taskBillNo=' + e.fbillno + '&FPRDORGID=' + this.value
  })
  },
  /** 上滑加载 */
  handleScrolltolower() {
	  console.log(this.tabMap.pageConfig.bottomEnd)
	if (this.tabMap.pageConfig.bottomEnd) return
	this.tabMap.pageConfig.pageIndex++
	this.initData()
  },
  /**
   * 下拉刷新数据
   */
  handleRefresherrefresh() {
	 
	if (this._refresherTriggered) {
		return;
	}
	//界面下拉触发，triggered可能不是true，要设为true
	if (!this.refresherTriggered) {
		this.refresherTriggered = true;
	}
	this.reset()
	this._refresherTriggered = true
	//this.tabMap.pageConfig.bottomEnd = false
	this.initData()
	
  },
  initData(){
	getMoList({
		pageSize : this.tabMap.pageConfig.pageSize,
		pageIndex : this.tabMap.pageConfig.pageIndex,
		FPRDORGID : this.value,
		billNo : this.billNo || "",
	
	}).then(res => {
		if (res.data.status !== 200) return;
		if (this.tabMap.pageConfig.pageIndex === 0) this.tabMap.taskList = [];
		
		// 遍历返回的数据列表，根据 ftype 设置盒子的颜色
		res.data.data.dataList.forEach(item => {
			if(item.ftype === 0){
				 item.boxColor = '#FF4E74'; // 设置盒子颜色为粉
			}else if (item.ftype === 1) {
		        item.boxColor = '#faf9de'; // 设置盒子颜色为黄
		    } else if (item.ftype === 2) {
		        item.boxColor = '#cce8cf'; // 设置盒子颜色为绿色
		    }
		});
		this.tabMap.taskList = this.tabMap.taskList.concat(res.data.data.dataList ?? []);
		if (res.data.status === 200 && this.tabMap.pageConfig.pageSize > res.data.data.dataList.length) {
			this.tabMap.pageConfig.bottomEnd = true;
		}
		this.tabMap.pageConfig.bottomLoading = false;
		this.loading = false;
		this.refresherTriggered =  false;
		this._refresherTriggered =  false;
		this.incompleteCount = res.data.data.incompleteCount;
		this.excuteCount = res.data.data.excuteCount;
		this.completeCount = res.data.data.completeCount;
	console.log(this.tabMap.taskList)
		})

  },
  //获取组织列表
  getOrgList(){
	getOrgList({}).then(res => {
		this.selectRange = res.data.data.dataList
	})	  
  },
   
  },
  mounted() {
	this.initData()
	this.getOrgList()
	
  },
  onLoad() {
	  if (typeof window.entryUrl === 'undefined' || window.entryUrl === ""){
	  	window.entryUrl = location.href.split('#')[0]
	  }
	  let url = /Android/i.test(navigator.userAgent)
	    ? window.location.href
	    : window.entryUrl
  	this.getWxConfig(url)
  },
  created() {
	
  },
  unmounted() {
  	
  }
 
  	
  
};
</script>

<style lang="scss" scoped>
		@import "../../static/css/common";
.pro-body {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
    .promenu-list {
        display: flex;
        flex-wrap: wrap;
        .promenu-item {
            display: flex;
            align-items: center;
            justify-content: center;
            // width: calc(33.33% - 10px); /* 修改为33.33% */
            height: 40px;
			width: 33.33%;
            box-sizing: border-box;
            border: 1px solid rgba(0, 0, 0, 0.2);

            // 第一列上下两个变成黄色
            &:nth-child(1), &:nth-child(4) {
                background-color: #FF4E74;
            }

            // 第二列变成黄色
            &:nth-child(2), &:nth-child(5) {
                background-color: #faf9de;
            }

            // 第三列变成绿色
            &:nth-child(3), &:nth-child(6) {
                background-color: #cce8cf;
            }
        }
    }
.fixed-header {
 position: fixed;
 top: 44px;
 left: 0;
 right: 0;
 z-index: 100;
 background-color: #fff;
 height: 90px; /* 根据实际高度调整 */
}
	.scroll-container {
	  flex: 1;
	  overflow: hidden;
	  overflow-y: auto;
	  -webkit-overflow-scrolling: touch; /* 支持 iOS 上的平滑滚动 */
	  
	}

.scroll {
   padding-top: 240px; /* 使用 padding-top 替代 margin-top */
    margin-bottom: 20px; /* 根据底部的高度调整 */
    height: calc(100vh - 240px - 1px); /* 根据需要调整高度 */
    position: relative; /* 避免使用 fixed */
    overflow-y: auto; /* 确保内容可以垂直滚动 */
}
	.picker {
	  padding: 10px;
	  border: 1px solid #ccc;
	  width: 65%;
	  margin-left:10px;
	  margin-top:20px;
	  font-size: 13px; /* 调整输入框文字大小 */
	}
	.uni-form-item {
	  display: flex;
	  align-items: center;
	  margin-bottom: 10px;
	}
	
	.search-box {
		display: flex;
		width: 74%;
		align-items: center;
		border: 1px solid #ccc;
		margin-left:10px;
		margin-top:15px;
	
	}
	
	.uni-input {
		flex: 1;
		padding: 10px;
		border: none;
		outline: none;
	}
	
	.search-icon {
	    cursor: pointer;
	}
	
	.search-icon-image {
	    width: 35px;
	    height: 35px;
		margin-right:10px;
		margin-top:8px;
	}

	.uni-list {
	
	    margin: 10px;
	}
	
	.uni-list-item {
		
	    padding: 15px;
	    border-bottom: 1px solid #ccc;
	}
	
	.uni-list-item:last-child {
	    border-bottom: none;
	}
	
	.uni-list-item[disabled] {
	    color: #ccc;
	    cursor: not-allowed;
	}
	
	
	.title-item {
	    text-align: center;
	    font-weight: bold;
		height: 10px;
	    background-color: #ffffff;
		font-size: 10px;
	}
.container{
		height:100%;
	}
	.reader-box {
		z-index: 3;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}
 
	.reader {
		width: 540rpx;
		height: 540rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	
}
</style>